import request from "@/services/interceptors";
import type { ActionType, ProColumns } from "@ant-design/pro-components";
import { ProTable } from "@ant-design/pro-components";
import { useRef } from "react";
import { message, Modal } from "antd";
import { ExclamationCircleFilled } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { ExamType } from "@/types";
import AddExam from "./AddExam";

const ExamList = () => {
  const actionRef = useRef<ActionType>(null);
  const navigate = useNavigate();
  const columns: ProColumns<ExamType>[] = [
    {
      title: "考试ID",
      dataIndex: "id",
      hideInSearch: true,
      hideInTable: true,
    },

    {
      title: "考试名称",
      dataIndex: "examName",
      hideInTable: true,
    },
    {
      title: "考试名称",
      dataIndex: "name",
      hideInSearch: true,
    },
    {
      title: "试卷名称",
      dataIndex: "paperName",
    },
    {
      title: "班级",
      dataIndex: "questionCount",
      hideInSearch: true,
      render: (text, record) => {
        return `${record.grade}年级${record.team}队${record.unit}区队`;
      },
    },
    {
      title: "考试时长(分钟)",
      dataIndex: "duration",
      hideInSearch: true,
    },
    {
      title: "计划开始时间",
      dataIndex: "planStartTime",
      valueType: "dateTime",
      hideInSearch: true,
    },
    {
      title: "开始时间",
      dataIndex: "realStartTime",
      valueType: "dateTime",
      hideInSearch: true,
    },
    {
      title: "考试时间",
      dataIndex: "examTime",
      valueType: "dateTimeRange",
      colSize: 8,
      fieldProps: {
        style: {
          width: "400px",
        },
      },
      hideInTable: true,
    },
    {
      title: "状态",
      dataIndex: "statusStr",
      hideInSearch: true,
    },
    {
      title: "操作",
      valueType: "option",
      key: "option",
      render: (text, record, _, action) => [
        record.statusStr === "未开始" && (
          <AddExam
            onSuccess={() => {
              action?.reload();
            }}
            editData={record}
            trigger={<a>编辑</a>}
            key="editable"
          ></AddExam>
        ),
        <a
          hidden={record.statusStr !== "未开始"}
          onClick={() => {
            Modal.confirm({
              title: "提示",
              icon: <ExclamationCircleFilled />,
              content: "确认开始考试吗？",
              okText: "确认",
              cancelText: "取消",
              onOk: async () => {
                await request.sgks.examStartCreate({
                  id: +record.id,
                });
                message.success("操作成功");
                action?.reload();
              },
            });
          }}
        >
          开始考试
        </a>,
        <a
          hidden={record.statusStr !== "进行中"}
          onClick={() => {
            Modal.confirm({
              title: "提示",
              icon: <ExclamationCircleFilled />,
              content: "确认开始考试吗？",
              okText: "确认",
              cancelText: "取消",
              onOk: async () => {
                await request.sgks.examStopCreate({
                  id: +record.id,
                });
                message.success("操作成功");
                action?.reload();
              },
            });
          }}
        >
          结束考试
        </a>,
        <a
          hidden={record.statusStr !== "未开始"}
          onClick={() => {
            Modal.confirm({
              title: "提示",
              icon: <ExclamationCircleFilled />,
              content: "确认删除吗？",
              okText: "确认",
              cancelText: "取消",
              onOk: async () => {
                await request.sgks.examDeleteCreate({
                  id: +record.id,
                });
                message.success("删除成功");
                action?.reload();
              },
            });
          }}
        >
          删除
        </a>,
        <a
          hidden={record.statusStr !== "已结束"}
          onClick={() => {
            navigate(`/exam/record/${record.id}`);
          }}
        >
          考试记录
        </a>,
      ],
    },
  ];

  return (
    <ProTable<ExamType>
      columns={columns}
      actionRef={actionRef}
      cardBordered
      request={async (params, sort, filter) => {
        console.log(params, sort, filter);
        const requestParams = {
          ...params,
          startTimeStart: params?.examTime?.[0],
          startTimeEnd: params?.examTime?.[1],
          pageNo: params.current,
          pageSize: params.pageSize,
        };
        delete requestParams.examTime;
        const res = await request.sgks.examListList({
          ...requestParams,
        } as any);

        return {
          data: res.data.records,
          total: res.data?.totalCount,
        };
      }}
      columnsState={{
        persistenceKey: "PaperList_List",
        persistenceType: "localStorage",
        defaultValue: {
          option: { fixed: "right", disable: true },
        },
      }}
      rowKey="id"
      search={{
        labelWidth: "auto",
      }}
      options={{
        setting: {
          listsHeight: 400,
        },
      }}
      pagination={{
        pageSize: 10,
      }}
      dateFormatter="string"
      toolBarRender={() => [
        <AddExam
          onSuccess={() => {
            actionRef.current?.reload();
          }}
        />,
      ]}
    />
  );
};

export default ExamList;
